<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数据绑定</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>1. Vue中常用的按键别名</h1>
            <p>回车 => enter</p>
            <p>删除 => delete （捕获删除和退格键）</p>
            <p>退出 => esc</p>
            <p>空格 => space</p>
            <p>换行 => tab(特殊)</p>
            <p>上 => up</p>
            <p>下 => down</p>
            <p>左 => left</p>
            <p>右 => right</p>
            <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">

            <h1>2. Vue中未提供别名的按键</h1>
            <p>可以使用按键原始的key值绑定，但注意要转为kebab-case(短横线命名)</p>
            <input type="text" placeholder="按下大小写转换键提示输入" @keyup.caps-lock="showInfo">

            <h1>3. 系统修饰键(用法特殊)</h1>
            <p>ctrl、alt、shift、meta(windows徽标键)</p>
            <p>(1) 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。</p>
            <input type="text" placeholder="按下Ctrl+任意键，再释放任意键，提示输入" @keyup.ctrl="showInfo"><br>
            <input type="text" placeholder="按下Ctrl+y提示输入" @keyup.ctrl.y="showInfo">
            <p>(2) 配合keydown使用：正常触发事件。</p>
            <input type="text" placeholder="按下Tab键提示输入" @keydown.tab="showInfo">

            <h1>4. 使用keyCode去指定按键</h1>
            <p><b>不推荐</b>使用keyCode去指定具体的按键</p>
            <input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo">

            <h1>5. 自定义键名</h1>
            <p>Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名。(不推荐)</p>
            <input type="text" placeholder="按下回车提示输入" @keyup.huiche="showInfo">
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示
            Vue.config.keyCodes.huiche = 13     // 定义回车键别名为huiche
            // 创建Vue实例，开端
            new Vue({
                el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
                data: {     // data中用于存储数据，数据供el指定的容器去使用
                    name: "任亭松"
                },
                methods: {
                    showInfo(e) {
                        // 按键名称和编码
                        console.log(e.key, e.keyCode)
                        // if (e.keyCode !== 13) return
                        console.log(e.target.value)
                    }
                    
                }
            })
        </script>
    </body>
</html>
